<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>我的事项</title>


    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}" src="myconfig/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" src="myconfig/layui/layui.js"></script>



    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" href="myconfig/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{/myconfig/layui/css/layui.css}" href="myconfig/layui/css/layui.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div id="dataBody" style="width: 100%; height: 100%">


<!-- 模态框（Modal） -->
<!-- 添加 事项 -->
<div class="modal fade" id="addMyItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myItem">
                    事项添加
                </h3>
            </div>
            <div class="modal-body">
                <form id="addMyItemForm">
                    <div style="height: 100%;width: 100%">
                        <div>
                            事项标题：
                            <input class="form-control" type="text" name="addMyItemTitle" onchange="searchType()">
                        </div>
                        <div style="width:100%;height: 20%;">
                            <div style="width:30%;height:90%;float:left;">
                                事项类型：
                                <select class="form-control" id="addMyItemType">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                            <div style="width:30%;height:90%;float:left;margin-left:5%">
                                紧急程度：
                                <select class="form-control" id="addMyItemUrgency">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                            <div style="width:30%;height:90%;float: left;margin-left:5%">
                                地区：
                                <select class="form-control" id="addMyItemArea">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div style="width: 100%;height:10%;">
                            事项内容：
                            <textarea id="addMyItemContent" class="form-control" rows="7%" cols="100%"></textarea>
                        </div>
                        <div style="width: 100%;height:10%;">
                            备注：
                            <textarea id="addMyItemRemark" class="form-control" rows="3%" cols="100%"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addMyItem()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

    <!-- 修改 事项 -->
    <div class="modal fade" id="changeMyItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="changeMyItem">
                        事项修改
                    </h3>
                </div>
                <div class="modal-body">
                    <form id="changeMyItemForm">
                        <input type="text" id="changeMyItemId" style="display: none">
                        <div style="height: 100%;width: 100%">
                            <div>
                                事项标题：
                                <input class="form-control" type="text" id="changeMyItemTitle">
                            </div>
                            <div style="width:100%;height: 20%;">
                                <div style="width:100%;height:90%;">
                                    紧急程度：
                                    <select class="form-control" id="changeMyItemUrgency"></select>
                                </div>
                                <div style="width: 100%;height:10%;">
                                    事项内容：
                                    <textarea id="changeMyItemContent" class="form-control" rows="7%" cols="100%"></textarea>
                                </div>
                                <div style="width: 100%;height:10%;">
                                    备注：
                                    <textarea id="changeMyItemRemark" class="form-control" rows="3%" cols="100%"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeChangeMyItemModal()">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="changeMyItemCommit()">提交修改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>



<!-- 数据表格 -->
<table class="layui-hide" id="listMyItems" lay-filter="MyItems"></table>

</div>
<!-- 头部工具栏 -->
<script type="text/html" id="listItemsToolbar">
    <div class="layui-btn-container">
        <button shiro:hasPermission="add_item" class="layui-btn layui-btn-sm layui-btn-normal" data-toggle="modal" data-target="#addMyItemModal"><span class="layui-icon layui-icon-add-1">&nbsp;添加</span></button>
        <button shiro:hasPermission="change_item" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="editMyItem"><span class="layui-icon layui-icon-edit">&nbsp;修改</span></button>
        <button shiro:hasPermission="personal_task_list" class="layui-btn layui-btn-sm" lay-event="CheckMyDetails"><span class="layui-icon layui-icon-link">&nbsp;查看子任务</span></button>
    </div>
</script>

<!-- 表格 格式 紧急状况 -->
<script type="text/html" id="urgencyColor">
    {{#  if(d.urgency === '正常'){ }}
        <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.urgency }}</span>
    {{#  } else { }}
        <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.urgency }}</span>
    {{#  } }}
</script>
<!-- 表格 格式 审批状态-->
<script type="text/html" id="stateColor">
    {{#  if(d.state === '审批通过'){ }}
        <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.state }}</span>
    {{#  } else if(d.state === '审批驳回') { }}
        <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.state }}</span>
    {{#  } else{ }}
        <span><i class="layui-badge-dot layui-bg-orange"></i>{{ d.state }}</span>
    {{#  } }}
</script>

<!-- 表格 操作按钮 -->
<script type="text/html" id="fileUploadButton">
    {{#  if(d.state === "等待审批"){ }}
    <a class="layui-btn layui-btn-radius layui-btn-xs layui-btn-normal" lay-event="fileUpload">附件上传</a>
    {{#  } }}
</script>

<script th:inline="none">
        /* 分页查看所有区级事项 */
        layui.use('table', function() {
            var table = layui.table;
            var $ = layui.$;
            $.ajax({
                type: "post",
                url: "itemsManage/listMyItems", // 数据接口
                success: function (result) {
                    var data = result.data;
                    table.render({
                        id:'MyItems',
                        elem: '#listMyItems',
                        title:'区级事项表',
                        toolbar: '#listItemsToolbar',
                        data: data,
                        height: 520,
                        cols: [[
                            {type: 'radio',width: '5%'}
                            , {field: 'sxId', title: 'ID', sort: true, width: '5%', align: 'center'}
                            , {field: 'name', title: '事项标题', width: '15%', align: 'center'}
                            , {field: 'content', title: '事项内容', width: '15%', align: 'center'}
                            , {field: 'state', title: '事项状态', width: '10%', align: 'center', sort: true,templet:'#stateColor'}
                            , {field: 'urgency', title: '紧急程度', width: '10%', align: 'center', sort: true,templet:'#urgencyColor'}
                            , {field: 'time', title: '立项时间', sort: true, width: '15%', align: 'center'}
                            , {field: 'remark', title: '备注', width: '15%', align: 'center'},
                            {title: '操作', width: '10%', align: 'center', toolbar: '#fileUploadButton'}
                        ]],
                        page: true, //是否显示分页
                        limits: [5, 10, 15,20], //每页显示个数
                        limit: 10, //每页默认显示的数量
                        group:5   //页码最多显示个数
                    });
                }
            });


            //监听行工具事件
            table.on('tool(MyItems)', function (obj) {
                var data = obj.data.sxId;
                var itemId = JSON.stringify(data);
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '文件上传'
                    , area: ['600px', '500px']
                    , shade: 0
                    , maxmin: true
                    , content: 'file_item.html?ItemId='+itemId
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero, index) {

                    }
                });
            });



            /* 工具栏监听事件 */
            table.on('toolbar(MyItems)', function(obj){     //items 为table表的ID
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                    if(checkStatus.data == ""){
                        layer.msg('请选择一个数据！',{
                            icon:0
                            ,time:500
                        });
                    }
                    switch(obj.event){
                        /* 查看一个事项子任务 */
                        case 'CheckMyDetails':
                            if(checkStatus.data != "") {
                                var sxIdData = checkStatus.data[0].sxId;//获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var itemStatus = checkStatus.data[0].state;//获取选中行数据中对应的 事项 Status
                                var itemUrengcy = checkStatus.data[0].urgency;//获取选中行数据中对应的 事项 urengcy
                                var itemType = checkStatus.data[0].type;//获取选中行数据中对应的 事项 urengcy
                                var sxId = JSON.stringify(sxIdData);
                                var urengcy = JSON.stringify(itemUrengcy)
                                var type = JSON.stringify(itemType)
                                CheckMyDetailsById(sxId,urengcy,itemStatus,type);
                            }
                            break;
                        /* 修改事项 */
                        case 'editMyItem':
                            if(checkStatus.data != "") {
                                var data = checkStatus.data[0].sxId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var status = checkStatus.data[0].state;
                                var sxId = JSON.stringify(data);
                                if(status == "等待审批"){
                                    changMyItem(sxId);
                                }else {
                                    layer.msg("该事项已处理，无法进行修改！");
                                }
                            }
                            break;
                    };
            });


        });
</script>


<script>
/* 添加一个事项 */
    function addMyItem() {
        var itemTitle = $("input[name='addMyItemTitle']").val();
        var itemItemType = $("#addMyItemType").val();
        var itemUrgency = $("#addMyItemUrgency").val();
        var itemArea = $("#addMyItemArea").val();
        var itemContent = $("#addMyItemContent").val();
        var itemRemark = $("#addMyItemRemark").val();
        if(itemTitle == "") {
            layer.msg("事项标题不能为空!");
        }else if(itemItemType == " "){
            layer.msg("事项类型不能为空！");
        }else if(itemUrgency == " "){
            layer.msg("事项紧急情况不能为空！");
        }else if(itemArea == " ") {
            layer.msg("地区不能为空！");
        }else if(itemContent == ""){
            layer.msg("事项内容不能为空！");
        }else if(itemRemark == ""){
            layer.msg("事项备注不能为空！");
        }else{
            $.ajax({
                url:"itemsManage/addItem",
                type:"post",
                data:{
                    "itemTitle":itemTitle,
                    "itemItemType":itemItemType,
                    "itemUrgency":itemUrgency,
                    "itemArea":itemArea,
                    "itemContent":itemContent,
                    "itemRemark":itemRemark
                },
                success:function (result) {
                    if(result == "success"){
                        if(itemUrgency == 2){
                            layer.msg("事项添加成功！并成功创建事项专报！",{
                                time:500,
                                end:function () {
                                    document.getElementById("addMyItemForm").reset();
                                    $("#addMyItemModal").modal("hide");
                                    location.reload();
                                }
                            });
                        }else {
                            layer.msg("事项添加成功！",{
                                time:500,
                                end:function () {
                                    document.getElementById("addMyItemForm").reset();
                                    $("#addMyItemModal").modal("hide");
                                    location.reload();
                                }
                            });
                        }
                    }else if(result == "areaError"){
                        layer.msg("不能添加非本地区的事项！");
                    }else {
                        layer.msg("事项添加失败！");
                    }
                }
            });
        }
    }



    /* 查看所有(地区、事项类型、紧急情况) 分类 */
    function searchType() {
        $.ajax({
           url:"itemsManage/searchAllType",
           type:"post",
           success:function (result) {
               var areaContent ="<option value=' ' selected>--请选择--</option>";
               var urgencyContent ="<option value=' ' selected>--请选择--</option>";
               var typeContent ="<option value=' ' selected>--请选择--</option>";
               var arrayArea = result.area;
               var arrayUrengcy = result.urengcy;
               var arrayType = result.itemType;

               areaContent+="<option value='"+arrayArea.areaId+"'>"+arrayArea.areaName+"</option>"

               for (var i = 0; i < arrayUrengcy.length; i++) {
                   urgencyContent+="<option value='"+arrayUrengcy[i].urgenryId+"'>"+arrayUrengcy[i].urgenryName+"</option>"
               }
               for (var i = 0; i < arrayType.length; i++) {
                   if(arrayArea.areaName != "柳州市"){
                       if(arrayType[i].itemTypeName == "市级事项"){
                           continue;
                       }
                   }else {
                       if(arrayType[i].itemTypeName == "区级事项"){
                           continue;
                       }
                   }

                   typeContent+="<option value='"+arrayType[i].itemTypeId+"'>"+arrayType[i].itemTypeName+"</option>"
               }
               $("#addMyItemArea").html(areaContent);
               $("#addMyItemType").html(typeContent);
               $("#addMyItemUrgency").html(urgencyContent);
           }
        });
    }


/* 修改 事项 */
    /* 关闭修改模态框 并 清空数据 */
    function closeChangeMyItemModal() {
        document.getElementById("changeMyItemForm").reset();
        $("#changeMyItemModal").modal("hide");
    }
    function changMyItem(sxId) {
        $("#changeMyItemModal").modal("show");
        searchMyItemById(sxId);
        searchMyItemUrgency(sxId);
    }
    function searchMyItemById(sxId) {
        $.ajax({
            url:"itemsManage/searchItemById",
            type:"post",
            data:{
                "ItemId":sxId
            },
            success:function (result) {
                $("#changeMyItemTitle").val(result.name);
                $("#changeMyItemContent").html(result.content);
                $("#changeMyItemRemark").html(result.remark);
                $("#changeMyItemId").val(result.sxId);
            }
        });
    }
    function searchMyItemUrgency(sxId) {
        $.ajax({
            url: "ItemUrgency/listUrgency",
            type: "post",
            data: {
                "itemId":sxId
            },
            success: function (result) {
                var urgency = result.urgency;
                var item = result.item;
                var content ="";
                for (var i = 0; i < urgency.length; i++) {
                    if(urgency[i].urgenryName == item.urgency){
                        content += "<option value='"+urgency[i].urgenryId+"' selected>"+urgency[i].urgenryName+"</option>";
                    }else {
                        content += "<option value='"+urgency[i].urgenryId+"'>"+urgency[i].urgenryName+"</option>";
                    }
                }
                    $("#changeMyItemUrgency").html(content);
            }
        });
    }
    //提交修改
    function changeMyItemCommit() {
        var changeItemTitle = $("#changeMyItemTitle").val();
        var changeItemUrgency = $("#changeMyItemUrgency").val();
        var changeItemContent = $("#changeMyItemContent").val();
        var changeItemRemark = $("#changeMyItemRemark").val();
        var changeItemId = $("#changeMyItemId").val();
       $.ajax({
           url:"itemsManage/updateItemById",
           type:"post",
           data:{
               "itemId":changeItemId,
               "editItemTitle":changeItemTitle,
               "editItemContent":changeItemContent,
               "editItemRemark":changeItemRemark,
               "editItemUrgency":changeItemUrgency
           },
           success:function (result) {
                if(result == "success"){
                    layer.msg("事项修改成功！",{
                       time:500,
                       end:function () {
                           closeChangeMyItemModal();
                           location.reload();
                       }
                    });
                }else {
                    layer.msg("事项修改失败！");
                }
           }
       });
    }









/* 查看一个事项子任务 */
function CheckMyDetailsById(ItemId,itemUrengcy,itemStatus,type) {
    if(itemStatus!="审批通过"){
        layer.msg("该事项未通过审批");
    }else{
        location.href="my_item_task.html?itemId="+ItemId;
    }
}
</script>



</body>
</html>